<template>
  <div class="dashboard">
    <vue-particles
      class="canvas"
      color="#7b7d7d"
      :particleOpacity="0.7"
      :particlesNumber="130"
      shapeType="circle"
      :particleSize="4"
      linesColor="#00b38f"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="100"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    ></vue-particles>
    <div class="ui stackable grid">
      <div class="four wide column"></div>
      <div class="eight wide column">
        <div class="title" id="zyheader">
          <h1>中药溯源系统监控面板</h1>
        </div>
      </div>
      <div class="right floated two wide column" style="margin-right: 0 !important">
        <div class="m-button">
          <button @click="gotoLogin" class="ui teal right labeled icon button" >
            <i class="right arrow icon"></i>
            <span v-if="this.$store.state.user.token">控制台</span>
            <span v-else>登录</span>
          </button>
        </div>
        <!-- <div style="margin-top: 2em">
          <a class="avatar">
            <img class="ui circular image" :src="avatar" style="width: 60px !important" alt="未登录" />
          </a>
        </div>-->
      </div>
    </div>
    <!-- 中间内容 -->
    <div class="m-container m-padded-tb-large">
      <!-- <div class="ui container"> -->
      <div class="ui stackable grid">
        <!-- 左侧数据图表 -->
        <div class="eleven wide column">
          <div class="ui stackable grid" >
            <div class="ten wide column">
              <!-- header -->
              <div class="ui m-card top attached segment m-border">
                <div class="ui middle two column grid">
                  <div class="column">
                    <h3 class="ui inverted m-text-font header">环境数据</h3>
                  </div>
                  <div class="right aligned column">
                    <h3 class="ui inverted header m-inline-block m-text-thin m-text-font">2020-4-02</h3>
                  </div>
                </div>
              </div>
              <!-- content -->
              <div class="ui teal m-content padded vertical segment">
                <div class="ui mobile  stackable inverted divided grid" style="padding-left: 10px !important;padding-top: 0 !important">
                  <!-- <div> -->
                    <div class="seven wide column" style="padding-top: 0 !important">
                      <!-- <div class="ui m-content segment" style="padding-top: 0 !important"> -->
                      <div style="padding: 10px">
                        <span
                          style="padding-top: 0 !important;font-size:14px;color:#cccccc"
                          class="m-text-thin"
                        >当前空气温度</span>
                        <div class="m-data">
                          <div class="ui inverted horizontal statistic">
                            <div class="value">
                              <count-to
                                :decimals="1"
                                :start-val="0"
                                :end-val="26"
                                :duration="2600"
                              />
                            </div>
                            <div class="label">°C</div>
                          </div>
                        </div>
                        <temp-chart></temp-chart>
                        <div class="ui inverted divider"></div>
                        <span
                          style="padding-top: 0 !important;font-size:14px;color:#cccccc"
                          class="m-text-thin"
                        >当前空气湿度</span>
                        <div class="m-data">
                          <div class="ui inverted horizontal statistic">
                            <div class="value">
                              <count-to
                                :decimals="1"
                                :start-val="0"
                                :end-val="49"
                                :duration="2600"
                              />
                            </div>
                            <div class="label">%RH</div>
                          </div>
                        </div>
                        <hum-chart></hum-chart>
                      </div>
                      <!-- </div> -->
                    </div>
                  <!-- </div> -->
                  <div class="nine wide column">
                    <!-- <div class="ui m-content segment" style="padding-top: 0 !important;"> -->
                      <div class="ui container" style="padding-right: 10px">

                      <div class="page-login--layer-time" flex="main:center cross:center">{{time}}</div>
                      <div class="ui list">
                        <div class="item">
                          <span style="font-size:14px;color:#cccccc" class="m-text-thin">当前土壤温度</span>
                        </div>
                        <div class="item">
                          <el-progress
                            :color="tempcolor"
                            :percentage="50"
                            :format="soiltempformat"
                            :show-text="false"
                          ></el-progress>
                          <span class="m-label">
                            <count-to :decimals="1" :start-val="0" :end-val="26" :duration="2600" />°C
                          </span>
                        </div>
                        <div class="item m-process">
                          <span style="font-size:14px;color:#cccccc" class="m-text-thin">当前土壤湿度</span>
                        </div>
                        <div class="item">
                          <el-progress :percentage="56" :format="soilhumformat" :show-text="false"></el-progress>
                          <span class="m-label">
                            <count-to :decimals="1" :start-val="0" :end-val="56" :duration="2600" />%RH
                          </span>
                        </div>
                        <div class="item m-process">
                          <span style="font-size:14px;color:#cccccc" class="m-text-thin">当前土壤ph值</span>
                        </div>
                        <div class="item">
                          <el-progress
                            :color="phcolor"
                            :percentage="65"
                            :format="soilphformat"
                            :show-text="false"
                          ></el-progress>
                          <span class="m-label">
                            <count-to :decimals="1" :start-val="0" :end-val="6.5" :duration="2600" />
                          </span>
                        </div>
                        <div class="item m-process">
                          <span style="font-size:14px;color:#cccccc" class="m-text-thin">当前光照强度</span>
                        </div>
                        <div class="item">
                          <el-progress
                            :color="lightcolor"
                            :percentage="50"
                            :format="lightformat"
                            :show-text="false"
                          ></el-progress>
                          <span class="m-label">
                            <count-to
                              :decimals="1"
                              :start-val="0"
                              :end-val="2000"
                              :duration="2600"
                            />Lux
                          </span>
                        </div>
                      </div>
                      </div>
                    <!-- </div> -->
                    <!-- 使用element的进度条显示其他数据 -->
                  </div>
                </div>
              </div>
            </div>
            <div class="six wide column">
              <!-- header -->
              <div class="ui m-card top attached segment m-border">
                <div class="column">
                  <h3 class="ui inverted m-text-font header">终端设备状态</h3>
                </div>
              </div>
              <!-- content -->
              <div class="ui teal m-content attached segment" style="margin-bottom: 2em">
                <div class="ui mobile reversed stackable inverted divided grid">
                  <!-- <div
                    class="ui fourteen wide column"
                    style="padding-top: 0 !important;padding-bottom: 0 !important"
                  >-->
                  <device-status></device-status>
                  <!-- </div> -->
                </div>
              </div>
              <div class="ui m-card top attached segment m-border">
                <div class="column">
                  <h3 class="ui inverted m-text-font header">终端设备分布</h3>
                </div>
              </div>
              <!-- content -->
              <div class="ui teal m-content attached segment">
                <div class="ui mobile reversed stackable inverted divided grid">
                  <!-- <div
                    class="ui fifteen wide column"
                    style="padding-top: 0 !important;padding-bottom: 0 !important"
                  >-->
                  <device-num></device-num>
                  <!-- </div> -->
                </div>
              </div>
            </div>
            <div class="sixteen wide column">
              <!-- header -->
              <div class="ui m-card top attached segment m-border">
                <div class="column">
                  <h3 class="ui inverted m-text-font header">数据采集情况</h3>
                </div>
              </div>
              <!-- content -->
              <div class="ui teal m-content attached placeholder segment">
                <mix-chart></mix-chart>
              </div>
            </div>
          </div>
        </div>
        <div class="five wide column">
          <!-- header -->
          <div class="ui m-card top attached segment m-border">
            <div class="column">
              <h3 class="ui inverted m-text-font header">告警信息/系统动态</h3>
            </div>
          </div>
          <!-- content -->
          <div class="ui teal m-content attached placeholder segment">
            <div class="block">
              <el-timeline>
                <el-timeline-item timestamp="2020/4/2" placement="top">
                  <el-card>
                    <h4>采集数据成功</h4>
                    <p>日志 提交于 2020/4/2 12:47</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2020/4/2" placement="top">
                  <el-card>
                    <h4>4号土壤传感器异常</h4>
                    <p>日志 提交于 2020/4/2 9:45</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2020/4/1" placement="top">
                  <el-card>
                    <h4>采集数据成功</h4>
                    <p>日志 提交于 2020/4/1 17:27</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2020/4/1" placement="top">
                  <el-card>
                    <h4>采集数据成功</h4>
                    <p>日志 提交于 2020/4/1 15:32</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2020/4/1" placement="top">
                  <el-card>
                    <h4>11号温度传感器数据异常</h4>
                    <p>日志 提交于 2020/4/1 12:46</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2020/3/31" placement="top">
                  <el-card>
                    <h4>采集数据成功</h4>
                    <p>日志 提交于 2020/4/1 10:46</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import CountTo from "vue-count-to";
import TempChart from "./charts/temperature";
import HumChart from "./charts/humidity";
import DeviceStatus from "./charts/deviceStatus";
import DeviceNum from "./charts/deviceNum";
import MixChart from "./charts/MixDataChart";
import { login } from "../../apitest/user";
export default {
  components: {
    TempChart,
    CountTo,
    HumChart,
    DeviceStatus,
    MixChart,
    DeviceNum
  },
  data() {
    return {
      time: dayjs().format("HH:mm:ss"),
      tempcolor: "#ef5055",
      phcolor: "#f5898b",
      lightcolor: "#f5d69f",
      avatar: localStorage.getItem("avatar"),
      islogin: null
    };
  },

  mounted() {
    this.timeInterval = setInterval(() => {
      this.refreshTime();
    }, 1000);
  },

  methods: {
    getwidth() {
      console.log("宽度：" + document.documentElement.clientWidth);
    },
    refreshTime() {
      this.time = dayjs().format("HH:mm:ss");
    },
    gotoLogin() {
      // let loginPage = this.$router.resolve({
      //   path: "/login"
      // });
      // window.open(loginPage.href, "_blank");
      this.$router.push({ path: "/login" });
    },
    soiltempformat(percentage) {
      return "25°C";
    },
    soilhumformat(percentage) {
      return "56%";
    },
    lightformat(percentage) {
      return "2000";
    },
    soilphformat(percentage) {
      return "6.5";
    }
  }
};
</script>

<style scoped src="./index.css"></style>
<style scoped src="semantic-ui-css/semantic.min.css"></style>
<style scoped>
.dashboard {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  /* font-family: "montserrat", sans-serif; */
  background: url("../../assets/pictures/bg.png") no-repeat;
  background-size: cover;
}
.canvas {
  position: fixed;
  width: 100%;
  height: 100%;
}
.title {
  margin-top: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title h1 {
  font-size: 60px;
  text-transform: uppercase;
  font-family: "MyyiCha";
  /* font-weight: 900; */
  color: #d4e9e936;
  background-image: url("../../assets/pictures/water.png");
  -webkit-background-clip: text;
  animation: water 15s infinite;
}
.login {
  position: relative;
}

.m-card {
  background-color: #22222c !important;
  border: none !important;
}
.m-content {
  /* background-color: #304156 !important; */
  background-color: #304156 !important;
  opacity: 0.9;
  border: none !important;
}
.m-header {
  background-color: #00b38f !important;
}
.m-data {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
}
.m-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.3em;
  color: #cccccc;
}
.m-process {
  margin-top: 1em;
}
.m-border {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity: 0.8;
}
.m-button {
  margin-top: 2em;
}
@keyframes water {
  from {
    background-position: left 0 top -30px;
  }
  to {
    background-position: left 1000px top -30px;
  }
}
</style>

<style lang="scss" scoped>
// 层
.page-login--layer {
  @extend %full;
  overflow: auto;
}
.page-login--layer-area {
  overflow: hidden;
}
// 时间
.page-login--layer-time {
  font-size: 4em;
  font-weight: bold;
  color: #d9d9d9;
  overflow: hidden;
  margin-top: 0.3em;
}
// 头像
.avatar-wrapper {
  margin-top: 5px;
  position: relative;

  .user-avatar {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .el-icon-caret-bottom {
    cursor: pointer;
    position: absolute;
    right: -20px;
    top: 25px;
    font-size: 12px;
  }
}
</style>